<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>02事件传参</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="demo">
        <!-- 传入一个参数 -->
        <button @click="sailing ('第一集')">第一集</button>
        <!-- 传入两个参数 -->
        <button @click="sailing2 ('第二集','出发吧')">第二集</button>
        <!-- 传参的同时还要使用事件对象e -->
        <!-- $event(用于占位) -->
        <button @click="sailing3 ('第三集',$event)">第三集</button>
        <button @click="sailing4 ('第四集',$event)">第四集</button>

        <!-- 错误传参法 -->
        <!-- <button @click="sailing5 ()">第五集</button> -->
        <!-- <button @click="sailing6 ($event)">第六集</button> -->

    </div>
    <script type="text/javascript"> 
        Vue.config.productionTip = false
        new Vue({
            el: '#demo',
            methods:{
                sailing(r){
                    alert(` ${r} 我是路飞！将要成为海贼王的男人！`)
                } ,
                sailing2(q,e){
                    alert(`${q},${e}大剑豪现身！海贼猎人 罗罗诺亚?索隆 `)
                },
                sailing3(y,e){
                    alert(` ${y} 蒙卡VS路飞！,${e.target.innerText}`)
                } ,
                sailing4(c,e){
                    alert(' ${c} 神秘的美少女是谁？-βヾ(,,・∇・,,川←娜美')
                } 
            }
        })
    </script>
</body>

</html>